<script setup>
import IconMail from "@/components/icons/IconMail.vue";
import IconStart from "@/components/icons/IconStart.vue";
import IconClock from "@/components/icons/IconClock.vue";
import IconSearch from "@/components/icons/IconSearch.vue";
import IconHeart_2 from "@/components/icons/IconHeart_2.vue";
import IconPlayCircle from "@/components/icons/IconPlayCircle.vue";

import {ref} from 'vue'

const activeIndex = ref('0')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
}
</script>

<template>
  <div class="component">
    <el-menu
        :default-active="activeIndex"
        :ellipsis="false"
        mode="horizontal"
        @select="handleSelect">
      <img class="logo" style="width: 200px; height: 59px" src="@/assets/mylogo.png" fit="contain"/>
      <el-menu-item index="1">
        精选课
      </el-menu-item>
      <el-menu-item index="2">
        直播课
      </el-menu-item>
      <el-menu-item index="3">
        班级中心
      </el-menu-item>
      <div class="flex-grow"></div>

      <div class="search">
        <div class="content">
          <div class="content2">
            <span class="text">搜索课程</span>
          </div>
        </div>
        <IconSearch width="45" height="45"></IconSearch>
      </div>
      <el-menu-item index="11">
        <el-popover width="400px">
          <template #reference>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          </template>
          <template #default>
            <div class="pop-box">
              <el-row style="text-align: left" :gutter="20">
                <el-col :span="5">
                  <el-avatar size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                </el-col>
                <el-col :span="19">
                  <el-row style="font-size: large">张三</el-row>
                  <el-row>个性签名</el-row>
                </el-col>
              </el-row>
              <el-row style="margin-top: 1rem;margin-bottom: 1rem" :gutter="20">
                <el-col :span="12">
                  <div class="pop-item">
                    <span class="number">12312</span>
                    <IconHeart_2 width="32" height="32"></IconHeart_2>
                    <span>我的关注</span>
                  </div>

                </el-col>
                <el-col :span="12">
                  <div class="pop-item">
                    <span class="number">1</span>
                    <IconPlayCircle width="32" height="32"></IconPlayCircle>
                    <span>待观看</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <div class="pop-item-row">个人空间</div>
                <div class="pop-item-row">个人中心</div>
                <el-divider/>
                <div class="pop-item-row">退出登录</div>
              </el-row>
            </div>
          </template>
        </el-popover>

      </el-menu-item>
      <el-menu-item index="12">
        <el-popover width="100px">
          <template #reference>
            <div class="right-menu-item">
              <IconMail width="30" height="30"></IconMail>
              <span>消息</span>
            </div>
          </template>
          <template #default>
            <div class="pop-message-box">
              <div class="pop-item-row">回复我的</div>
              <div class="pop-item-row">班级消息</div>
              <div class="pop-item-row">公告</div>
            </div>
          </template>
        </el-popover>

      </el-menu-item>
      <el-menu-item index="13">
        <div class="right-menu-item">
          <IconStart width="30" height="30"></IconStart>
          <span>收藏</span>
        </div>
      </el-menu-item>
      <el-menu-item index="14">
        <div class="right-menu-item">
          <IconClock width="30" height="30"></IconClock>
          <span>历史记录</span>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.component {
  height: 100%;
  max-width: 100%;
}

.logo {
  cursor: pointer;
}

.el-menu {
  height: 60px;
}

.el-menu .right-menu-item {
  display: flex;
  flex-direction: column;
  place-items: center;
  line-height: normal;
  font-size: smaller;
}

.pop-item {
  display: flex;
  flex-direction: column;
  place-items: center;
  font-size: smaller;
  line-height: normal;
  padding: 0.5rem;
  border-radius: 1rem;
}

.pop-item .number {
  margin-bottom: -25px;
  z-index: 1024;
  font-size: medium;
  font-weight: bolder;
}

.pop-item:hover {
  color: var(--el-menu-hover-text-color);
  background-color: var(--el-menu-hover-bg-color);
  cursor: pointer;
}

.pop-item-row {
  width: 100%;
  line-height: 35px;
  border-radius: 1rem;
}

.pop-item-row:hover {
  color: var(--el-menu-hover-text-color);
  background-color: var(--el-menu-hover-bg-color);
  cursor: pointer;
}

.pop-message-box .pop-item-row {
  padding-left: 1rem;
}

.flex-grow {
  flex-grow: 1;
}

.search {
  display: flex;
  align-items: center;
  height: var(--el-menu-item-height);
  line-height: var(--el-menu-item-height);
  font-size: var(--el-menu-item-font-size);
  color: var(--el-menu-text-color);
  padding: 0 var(--el-menu-base-level-padding);
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
  box-sizing: border-box;
  white-space: nowrap;
}

.search .content {
  /*background-color: #e0995e;*/
  width: 10rem;
  margin-right: -40px;
  border-radius: 3rem;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: normal;
}

.search .content .content2 {
  background-color: #4f5d73;
  border-radius: 3rem;
  height: 60%;
  margin-left: 1rem;
  display: flex;
  align-items: center;
}

.search .content .content2 .text {
  font-size: small;
  padding-left: 1rem;
  color: #a8abb2;
}

.search .content:hover {
  background-color: #e0995e;
}

.pop-box {
  text-align: center;
  padding: 0.5rem;
}
</style>